<template>
  <div id="order-detail">
    <div class='order-header' style="border-bottom: 2px solid #58B7FF;padding-bottom: 10px;"><i
        class="el-icon-d-arrow-right" style="color: #58B7FF; font-size: 12px;"></i> 订单详情</div>
    <div style="margin: 20px 0;">
      <table style="width: 100%;">
        <tr>
          <td class="info-title">订单号：</td>
          <td class="info-content">{{editInfo.No}}</td>
          <td class="info-title">姓名：</td>
          <td class="info-content">{{editInfo.customerName}}</td>
        </tr>
        <tr v-if="editInfo.orderIdentifier==='06'">
        <tr>
          <td class="info-title">手机号：</td>
          <td class="info-content">{{editInfo.telephoneNo}}</td>
          <td class="info-title">机型：</td>
          <td class="info-content">{{editInfo.brandName}} , {{editInfo.modelName}} ,
            {{editInfo.deviceColor}}</td>
        </tr>
        <tr>
          <td class="info-title">服务方式：</td>
          <td class="info-content">{{editInfo.serviceTypeName}}</td>
        </tr>
        <tr>
          <td class="info-title">故障：</td>
          <td class="info-content" colspan="3">
          </td>
        </tr>
        <tr>
          <td class="info-title">预估总价：</td>
          <td class="info-content">{{editInfo.price}} </td>
          <td class="info-title">实收：</td>
          <td class="info-content">{{editInfo.actualPrice}}</td>
        </tr>
        <tr>
          <td class="info-title">状态：</td>
          <td class="info-content">{{editInfo.adminStatusName}}</td>
          <td class="info-title">工程师：</td>
          <td class="info-content">{{editInfo.engineerName}}</td>
        </tr>
        <tr>
          <td class="info-title">预约时间：</td>
          <td class="info-content">{{editInfo.beginTime}}</td>
          <td class="info-title">创建时间：</td>
          <td class="info-content">{{editInfo.createTime}}</td>
        </tr>
        <tr>
          <td class="info-title">客服备注：</td>
          <td class="info-content">{{editInfo.serviceRemark}}</td>
          <td class="info-title">维修师备注：</td>
          <td class="info-content">{{editInfo.wxsRemark}}</td>
        </tr>
        <tr>
          <td class="info-title">客服备注：</td>
          <td class="info-content">
            <el-input type="textarea" :rows="2" :placeholder="editInfo.serviceRemark"
              v-model="dataProviderCopy.serviceRemark" icon="edit"></el-input>
          </td>
          <td class="info-title">维修师备注：</td>
          <td class="info-content">
            <el-input type="textarea" :rows="2" :placeholder="editInfo.wxsRemark" v-model="dataProviderCopy.wxsRemark"
              icon="edit">
            </el-input>
          </td>
        </tr>
        <tr>
          <td class="info-title">客户备注：</td>
          <td class="info-content">{{editInfo.remark}}</td>
        </tr>
        <tr>
          <td class="info-title"></td>
          <td class="info-content">
            <el-button v-if="editInfo.adminStatus === '06'&& btnclickYZF && editInfo.isCancel==='Y'" type="text"
              @click="updateOrderToYZF">已支付</el-button>
          </td>
          <td class="info-content">
            <el-select v-if="editInfo.adminStatus!=='01'&& editInfo.isCancel!='Y'" v-model="editInfo.canlereason"
              placeholder="请选择取消订单原因">
              <el-option v-for="item in canlereasonlist" :value="item.CODE" :label="item.REASON" :key="item">
              </el-option>
            </el-select>
          </td>
          <td>
            <el-button v-show="editInfo.adminStatus!='01' && editInfo.isCancel!='Y'" type="primary"
              @click="cancelreason">确认取消订单</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div v-if="editInfo.adminStatus!='12'" class='order-header'
      style="border-bottom: 2px solid #58B7FF;padding-bottom: 10px;"><i class="el-icon-d-arrow-right"
        style="color: #58B7FF; font-size: 12px;"></i> 订单修改</div>
    <el-form v-if="editInfo.adminStatus!='12'" label-width="100px" style="padding-top: 15px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名：">
            <el-input v-model="editInfo.customerName" :placeholder="dataProviderCopy.customerName" icon="edit">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号：">
            <el-input v-model="editInfo.telephoneNo" :placeholder="dataProviderCopy.telephoneNo" icon="edit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地：">
            <el-input v-model="editInfo.address" :placeholder="dataProviderCopy.address" icon="edit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址：">
            <el-input v-model="editInfo.address" :placeholder="dataProviderCopy.address" icon="edit">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务方式：">
            <el-select v-model="editInfo.serviceType" :placeholder="dataProviderCopy.serviceName"
              @change="changservice">
              <el-option value="SM" label="上门维修"></el-option>
              <el-option value="DD" label="到店维修"></el-option>
              <el-option value="JS" label="寄送维修"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div v-if="editInfo.serviceType=='JS'">
          <el-col :span="12">
            <el-form-item label="维修中心：">
              <el-select v-model="editInfo.centerName" :placeholder="dataProviderCopy.mainTainCenterName">
                <el-option v-for="item in centerlist" :label="item.centerName" :value="item.centerName" :key="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <div v-if="editInfo.serviceType=='DD'">
          <el-col :span="12">
            <el-form-item label="到店维修：">
              <el-select v-model="editInfo.shopName" :placeholder="dataProviderCopy.shopName">
                <el-option v-for="item in storeList" :value="item.shopName" :label="item.shopName" :key="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="24" v-if="serviceType != 'JS'">
          <el-form-item label="预约时间：">
            <el-date-picker v-model="editInfo.dated" type="date" placeholder="日期"></el-date-picker>
            <el-time-select v-model="editInfo.startTime" :picker-options="{start: '08:00', step: '01:00', end: '22:00'}"
              placeholder="开始时间"></el-time-select>
            <el-time-select v-model="editInfo.endTime" :picker-options="{start: '08:00', step: '01:00', end: '22:00'}"
              placeholder="结束时间"></el-time-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="机型：">
              <el-cascader v-model="editInfo.brands"
                :placeholder="editInfo.brandName+' / '+editInfo.modelName+' / '+editInfo.deviceColor"
                :options="brandlist" :show-all-levels="true" :props="props.brandProps" style="width:100%;"
                @change="changebrand"></el-cascader>
            </el-form-item>
          </el-col>
        </el-col>
        <div v-for="item in editInfo.orderFailures" :key="item">
          <el-col :span="12">
            <el-form-item label="故障：">
              <el-cascader v-model="item.selectedFalt" :placeholder="item.failureSubName" :options="faltlist"
                :show-all-levels="true" :props="props.faltProps" @change="faltchange" style="width:100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="故障价格：">
              <el-input v-model="item.price" @change="faltpricechange" placeholder="请输入" icon="edit" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="12">
          <el-col :span="12" :offset="8">
            <el-button type="primary" @click="addFlat">添加故障</el-button>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估总价：">
            <el-input v-model="editInfo.price" placeholder="请输入" icon="edit" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="12">
          <el-form-item label="实收：">
            <el-input v-model="editInfo.actualPrice" placeholder="请输入" icon="edit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户备注：">
            <span v-text="editInfo.remark" :disabled="true"></span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button @click="canle">取消</el-button>
      <el-button type="primary" @click="saveup">保存</el-button>
    </div>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtil'
  import moment from 'moment'
  export default {
    name: "order_detail_ss",
    data: function () {
      return {
        props: {
          faltProps: {
            value: "label",
            label: "label",
            children: "children"
          },
          cityProps: {
            value: "provinceName",
            label: "provinceName",
            children: "children"
          },
          brandProps: {
            value: "name",
            label: "name",
            children: "children"
          }
        },
        faltlist: [],
        citylist: [],
        brandlist: [],
        serviceType: null,
        centerlist: [],
        storeList: [],
        canlereasonlist: [],
        btnclickYZF: true,

      }
    },
    methods: {
      changservice(value) {
        if (value === "DD") {
          this.editInfo.serviceType = "DD";
          this.editInfo.serviceName = "到店维修";
        } else if (value === "JS") {
          this.editInfo.serviceType = "JS";
          this.editInfo.serviceName = "寄送维修";
        } else if (value === "SM") {
          this.editInfo.serviceType = "SM";
          this.editInfo.serviceName = "上门维修";
        }
      },
      cancelreason() { //取消订单
        if (this.editInfo.canlereason == null || this.editInfo.canlereason == "" || typeof this.editInfo.canlereason ==
          "underfined") {
          r.message("请选择取消原因", "warning");
        } else {
          this.$emit("cancelreason", this.editInfo.orderNo, this.editInfo.canlereason);
        }
      },
      updateOrderToYZF() { //已支付
      },
      addFlat() { //添加故障
        if (this.dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != null && this
          .dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != "" && typeof this
          .dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != "undefined") {
          this.dataProviderCopy.orderFailures.push({
            "price": 0
          })
        } else {
          r.message("您还有没选择的故障类型", "warning");
          return;
        }
      },
      faltchange(value) {
        if (this.editInfo.brandName != null && this.editInfo.brandName != "" && typeof this.editInfo
          .brandName != "undefined") {
          for (let faltname of this.faltlist) {
            if (faltname.label === value[0]) {
              for (let falttype of faltname.children) {
                if (falttype.label === value[1]) {
                  for (let faltSolution of falttype.children) {
                    if (faltSolution.label === value[2]) {
                      for (let falttypeName of this.editInfo.orderFailures) {
                        if (falttypeName.selectedFalt != null && falttypeName.selectedFalt != "" && typeof falttypeName
                          .selectedFalt != "undefined") {
                          if (falttypeName.selectedFalt[0] === value[0] && falttypeName.selectedFalt[1] === value[1] &&
                            falttypeName.selectedFalt[2] === value[2]) {
                            falttypeName.failureSubName = value[1];
                            falttypeName.solution = faltSolution.faltId;
                            falttypeName.orderNo = this.editInfo.orderNo;
                            falttypeName.price = faltSolution.price;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.faltpricechange();
        } else {
          r.message("请先选择品牌", "warning");
        }
      },
      faltpricechange() {
        this.dataProviderCopy.price = 0;
        this.dataProviderCopy.actualPrice = 0;
        if (this.dataProviderCopy.orderFailures.length > 0) {
          for (let faltprice of this.dataProviderCopy.orderFailures) {
            if (faltprice.price === null || faltprice.price === "") {
              faltprice.price = 0;
              this.dataProviderCopy.price += parseInt(faltprice.price);
            } else {
              this.dataProviderCopy.price += parseInt(faltprice.price);
            }
          }
          this.dataProviderCopy.actualPrice = this.dataProviderCopy.price;
        }
      },
      changebrand(value) {
        if (this.editInfo.brandName !== value[1] || this.editInfo.modelName !== value[2] || this.editInfo
          .deviceColor !== value[3]) {
          this.showfalts(value[1], value[2], value[3]);
          for (let selectitem of this.dataProviderCopy.orderFailures) {
            if (selectitem.selectedFalt != null && selectitem.selectedFalt != "" && typeof selectitem.selectedFalt !=
              "undefined") {
              selectitem.selectedFalt = new Array(0);
            }
            selectitem.price = parseInt(0);
          }
          this.faltpricechange();
        }
        this.dataProviderCopy.brandName = value[1];
        this.dataProviderCopy.modelName = value[2];
        this.dataProviderCopy.deviceColor = value[3];
      },
      saveup() {
        if (this.editInfo.shopName != null && this.editInfo.shopName != "") {
          this.dataProviderCopy.shopName = this.editInfo.shopName;
        }
        if (this.editInfo.centerName != null && this.editInfo.centerName != "") {
          this.dataProviderCopy.mainTainCenterName = this.editInfo.centerName;
        }
        if (this.editInfo.serviceRemark != null && this.editInfo.serviceRemark != "") {
          this.dataProviderCopy.serviceRemark = this.editInfo.serviceRemark;
        }
        if (this.editInfo.wxsRemark != null && this.editInfo.wxsRemark != "") {
          this.dataProviderCopy.wxsRemark = this.editInfo.wxsRemark;
        }
        if (this.editInfo.customerName != null && this.editInfo.customerName != "") {
          this.dataProviderCopy.orderElement.customerName = this.editInfo.customerName;
        }
        if (this.editInfo.telephoneNo != null && this.editInfo.telephoneNo != "") {
          this.dataProviderCopy.orderElement.telephoneNo = this.editInfo.telephoneNo;
        }
        if (this.editInfo.address != null && this.editInfo.address != "") {
          this.dataProviderCopy.orderElement.address = this.editInfo.address;
        }
        if (this.editInfo.serviceType != null && this.editInfo.serviceType != "") {
          if (this.editInfo.serviceType === "DD") {
            this.dataProviderCopy.serviceType = "DD";
            this.dataProviderCopy.serviceName = "到店维修";
          } else if (this.editInfo.serviceType === "JS") {
            this.dataProviderCopy.serviceType = "JS";
            this.dataProviderCopy.serviceName = "寄送维修";
          } else if (this.editInfo.serviceType === "SM") {
            this.dataProviderCopy.serviceType = "SM";
            this.dataProviderCopy.serviceName = "上门维修";
          }
        }

        if (this.editInfo.serviceType === "SM" || this.editInfo.serviceType === "DD") {
          this.dataProviderCopy.beginTime = moment(moment(this.editInfo.dated).format('YYYY-MM-DD') + " " +
            this.editInfo.startTime).toDate()
        }
        if (this.editInfo.serviceType === "SM" || this.editInfo.serviceType === "DD") {
          this.dataProviderCopy.endTime = moment(moment(this.editInfo.dated).format('YYYY-MM-DD') + " " +
            this.editInfo.endTime).toDate()
        }



        this.$emit("saveup", this.dataProviderCopy);

      },
      canle() {
        this.$emit("canle");
      }
    },
    computed: {
      dataProviderCopy() {
        var newObject = {};
        Object.assign(newObject, this.editInfo);
        return newObject;
      }
    },
    props: {
      editInfo: {
        type: Object,
        required: true
      },
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  .info-title {
    padding: 0 5px 0 10px;
  }

  .info-title {
    text-align: right;
  }

  .info-content {
    text-align: left;
    padding-right: 10px;
  }

  tr {
    line-height: 28px;
  }

  .el-select {
    width: 100%;
  }

</style>
